<!--  -->
<template>
  <div>
    <el-upload class="upload-demo mt-10" drag :limit="5" :headers="headers" :data="{path:'/test/'}"
      :before-upload="onBeforeUpload" action="#" :on-change="changeData" :http-request="handleRequest" multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <!-- <div class="el-upload__tip" slot="tip">单个文件大小不超过20MB</div> -->
    </el-upload>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        action: 'http://127.0.0.1:8087/file/bucket/upload',
        currentPath: '/test/',
        headers: {
          "KY-TOKEN": this.$store.getters.getToken,
          "KY-SERVICE": "kingyin is yyds!"
        },
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      onBeforeUpload(file) {
        const isLt20M = file.size / 1024 / 1024 < 20;

        if (!isLt20M) {
          Notiflix.Report.Warning('警告', '单个上传文件大小不能超过 20MB!', '好的');
        }
        return isLt20M;
      },
      changeData(file, fileList) {
        // 数据小于0.1M的时候按KB显示
        const size = file.size / 1024 / 1024 > 0.1 ? `(${(file.size/1024/1024).toFixed(1)}M)` :
          `(${(file.size/1024).toFixed(1)}KB)`
        file.name.indexOf('M') > -1 || file.name.indexOf('KB') > -1 ? file.name : file.name += size
      },

      handleRequest(uploader) {
          this.$notify({
          title: 'HTML 片段',
          dangerouslyUseHTMLString: true,
          message: '<strong>这是 <i>HTML</i> 片段</strong>'
        });
        let formdata = new FormData()
        formdata.append('file', uploader.file)
        formdata.append('path', this.currentPath)
        const config = {

        }
        this.$axios.post(this.action, formdata, {
          headers: this.headers,
          onUploadProgress: progressEvent => {
            // progressEvent.loaded:已上传文件大小
            // progressEvent.total:被上传文件的总大小
            let num = (progressEvent.loaded / progressEvent.total * 100) | 0
            // let num = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
            this.progressPercent = num;
            uploader.onProgress({
              percent: num
            })
          }
        }).then(res => {
          if (res.data.code === 20000) {
            uploader.onSuccess();
          }
        }).catch((err) => {
          uploader.onError();
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>

</style>
